<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>

  <!-- jQuery, -->
	<script src="jquery/jquery-1.10.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>

  <script>
  $(function () {
    $('.mousefish').fotorama({shuffle: true, nav: false, loop: true, arrows: false});
  });
  </script>

  <style type="text/css">
    .mousefish .fotorama__wrap {
      margin: auto;
    }
  </style>
</head>
<body>

<div class="ipad">
	<div class="mousefish" data-height="293">
		<img src="i/mousefish/mouse_01.jpg">
		<img src="i/mousefish/octopus_01.jpg">
		<img src="i/mousefish/parrot_01.jpg">
		<img src="i/mousefish/worm_01.jpg">
		<img src="i/mousefish/fish_01.jpg">
	</div>
	<div class="mousefish" data-height="249">
		<img src="i/mousefish/parrot_02.jpg">
		<img src="i/mousefish/mouse_02.jpg">
		<img src="i/mousefish/fish_02.jpg">
		<img src="i/mousefish/octopus_02.jpg">
		<img src="i/mousefish/worm_02.jpg">
	</div>
	<div class="mousefish" data-height="290">
		<img src="i/mousefish/fish_03.jpg">
		<img src="i/mousefish/parrot_03.jpg">
		<img src="i/mousefish/worm_03.jpg">
		<img src="i/mousefish/octopus_03.jpg">
		<img src="i/mousefish/mouse_03.jpg">
	</div>
</div>

</body>
</html>